<template>
	<div ref="el">
		<div class="pt-2">
			<base-loading-box
				class="w-full top-winner__wrapper"
				:style="{ height: `${itemWidth + 44}px` }"
				:isEmpty="isEmpty"
				:error="error"
				:loading="loading">
				<Vue3Marquee class="top-winner__wrapper" :pauseOnHover="true" :duration="22">
					<ListItem :type="type" :data="item" v-for="item in list" :key="item.id" />
				</Vue3Marquee>
			</base-loading-box>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import type { Ref } from 'vue'
import ListItem from './list-item.vue'
import { BaseLoadingBox } from '@/components/base'
import { liveWins } from '@/api/slots'
import { casinoLiveWins } from '@/api/casino'
import { getBigWinnerList } from '@/api/other'
import { useRequest } from '@/hooks'
import { useListCols } from '@/hooks'
import { useElementSize } from '@vueuse/core'
import { useAppStore, useCasinoStore, useSlotStore } from '@/store'
import { Vue3Marquee } from 'vue3-marquee'
const el = ref(null)
const { cols } = useListCols(el)
const { width } = useElementSize(el)
const slotStore = useSlotStore()
const casinoStore = useCasinoStore()
const appStore = useAppStore()
const loading = ref(true)
const list: Ref<any[]> = ref([])
const props = defineProps({
	tab: {
		type: Number as any,
		default: 1
	},
	type: {
		type: String,
		default: 'slots'
	}
})
const selectAPI = () => {
	if (props.type === 'slots') {
		return liveWins
	} else if (props.type === 'casino') {
		return casinoLiveWins
	} else {
		return getBigWinnerList
	}
}
const { run, data, error, isEmpty } = useRequest<any>(selectAPI(), { pageSize: 20 })

const getData = async () => {
	if (props.type === 'casino') {
		casinoStore.setLiveWins({
			type: -1,
			data: []
		})
	} else {
		slotStore.setLiveWins({
			type: -1,
			data: []
		})
	}
	// loading.value = true
	const liveTypeKv: any = {
		1: 'daily',
		2: 'weekly',
		3: 'monthly'
	}
	if (props.type === 'casino') {
		await run({
			liveType: liveTypeKv[props.tab]
		})
		casinoStore.setLiveWins({
			type: -1,
			data: data
		})
	} else if (props.type === 'slots') {
		await run({
			type: props.tab
		})
		slotStore.setLiveWins({
			type: -1,
			data: data
		})
	} else {
		list.value = casinoStore.bigWinnerList
		const refresh = true
		list.value = []
		await run({ pageSize: 40, code: liveTypeKv[props.tab] }, { refresh })
		list.value = data.value || []
		casinoStore.setBigWinnerList(list.value)
	}
}

watch(
	() => props.tab,
	(val, oldVal) => {
		if (val !== oldVal && val) {
			getData()
		}
	}
)

watch(
	() => appStore.region,
	() => {
		getData()
	}
)

const itemWidth = computed(() => {
	if (width.value && cols.value) {
		return (width.value - (cols.value * 3 - 1) * 10) / cols.value / 3
	}
	return 200
})

// const list = computed(() => {
// 	if (props.type === 'casino') {
// 		return casinoStore.bigWinsList
// 	}
// 	return slotStore.bigWinsList
// })

// const emptyList = computed(() => {
// 	if (list.value?.length && list.value.length < cols.value * 3) {
// 		return Array.from(new Array(cols.value * 3 - list.value.length), (...cont) => cont[1])
// 	}
// 	return []
// })

getData()
</script>
<style>
.top-winner__wrapper {
	height: 135px !important;
}
.top-winner__wrapper .item-img__wrapper {
	height: 96px;
}
.top-winner__wrapper .item-img {
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
@media (max-width: 768px) {
	.top-winner__wrapper {
		height: 109px !important;
	}
	.top-winner__wrapper .item-img__wrapper {
		height: auto;
	}
	.top-winner__wrapper .item-img {
		width: 100%;
	}
}
</style>
